<template>
	<view class="popup">
		<r-popup v-model="relong.popup.show" mode="bottom" :safe-area-inset-bottom="true" z-index="10000">
			<view class=" u-type-info-light-bg">
				<view class="wd-flex">
					<scroll-view class="wd-flex-1 wd-whitespace-nowrap wd-truncate wd-py-30r" :scroll-x="true">
						<view class="wd-flex wd-items-center">
							<view class="wd-px-40r wd-text-center" @click="onCopy">
								<view class="">
									<u-icon name="custom-icon-fuzhi" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">复制</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onEdit">
								<view class="wd-pt-5r">
									<u-icon name="custom-icon-bianjibi" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="">换图</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onFilter">
								<view class="wd-pt-5r">
									<u-icon name="custom-icon-lvjing" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">滤镜</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onLayer">
								<view class="">
									<u-icon name="custom-icon-layer" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">图层</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onFlip">
								<view class="">
									<u-icon name="custom-icon-zuoyoufanzhuan" custom-prefix="custom-icon"
										size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">翻转</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onAlpha">
								<view class="">
									<u-icon name="custom-icon-toumingdu" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">透明度</view>
							</view>
							<view class="wd-px-40r wd-text-center" @click="onMove">
								<view class="">
									<u-icon name="custom-icon-weitiao" custom-prefix="custom-icon" size="40"></u-icon>
								</view>
								<view class="wd-pt-5r">微调</view>
							</view>
						</view>
					</scroll-view>
					<view class="wd-flex wd-items-center u-type-info-dark-bg" @click="close()">
						<view class="wd-px-30r wd-text-center wd-text-fff">
							<view class="">
								<u-icon name="custom-icon-guanbi" custom-prefix="custom-icon" size="40"></u-icon>
							</view>
							<view class="wd-pt-5r">关闭</view>
						</view>
					</view>
				</view>
			</view>
		</r-popup>
		
		<alpha-popup ref="alphaPopup" :canvas="canvas"></alpha-popup>
		<filter-popup ref="filterPopup" :canvas="canvas"></filter-popup>
		<flip-popup ref="flipPopup" :canvas="canvas"></flip-popup>
		<layer-popup ref="layerPopup" :canvas="canvas"></layer-popup>
		<move-popup ref="movePopup" :canvas="canvas"></move-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	import alphaPopup from './items/alpha-popup.vue'
	import filterPopup from './items/filter-popup.vue'
	import flipPopup from './items/flip-popup.vue'
	import layerPopup from './items/layer-popup.vue'
	import movePopup from './items/move-popup.vue'
	export default {
		name: "fabric-canvas-operate",
		props: {
			canvas: {
				type: Object,
			},
		},
		components: {
			alphaPopup,
			filterPopup,
			flipPopup,
			layerPopup,
			movePopup,
		},
		data() {
			return {
				activeObj: {},
				relong: {
					popup: {
						show: false
					}
				}
			};
		},
		watch: {

		},
		methods: {
			//展示
			show() {
				this.relong.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
			},
			//关闭
			close() {
				this.relong.popup.show = false;
			},

			//复制
			onCopy() {
				this.activeObj.clone((clonedObj) => {
					this.canvas.discardActiveObject();
					clonedObj.set({
						left: clonedObj.left + 20,
						top: clonedObj.top + 20,
						evented: true,
					});
					this.canvas.add(clonedObj);
					this.canvas.setActiveObject(clonedObj);
				})
				this.canvas.renderAll();
			},

			//编辑
			onEdit() {
				uni.chooseFile({
					count: 1,
					type: 'image',
					extension:['.jpg','.png'],
					success: (res) => {
						let file = res.tempFiles[0];
						vk.myfn.blobToBase64(file.path).then(base64 =>{
							this.activeObj.setSrc(base64, (img)=>{
								img.set({
									top: (this.canvas.height - img.height) / 2 ,
									left: (this.canvas.width - img.width) / 2 ,
								})
								this.canvas.renderAll();
							})
						})
					}
				})
			},
			
			//滤镜
			onFilter(){
				this.$refs.filterPopup.show();
			},
			
			//图层
			onLayer(){
				this.$refs.layerPopup.show();
			},
			
			//翻转
			onFlip(){
				this.$refs.flipPopup.show();
			},
			
			//透明度
			onAlpha(){
				this.$refs.alphaPopup.show();
			},
			
			//微调
			onMove(){
				this.$refs.movePopup.show();
			}
		},
	}
</script>

<style>
	.popup {
			{
			touch-action: none;
		}
	}
</style>